<template>
	<div class="cant">
		<el-dialog :title="dataForm.userId ? '修改' : '添加'" :visible.sync="dialogVisible" :close-on-click-modal="false"
			width="40%" :before-close="handleClose">
			<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitFun()"
				v-loading="loading" label-position="right" label-width="120px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model.trim="dataForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="工号" prop="number">
					<el-input v-model.trim="dataForm.number" placeholder="工号"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="dataForm.password" type="password" placeholder="密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="comfirmPassword">
					<el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model.trim="dataForm.email" placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input v-model.trim="dataForm.mobile" placeholder="电话"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="roleIdList">
					<el-select @change="handRole" class="goodsindex-queryInfo-li" v-model="dataForm.roleIdList" size="small"
						clearable placeholder="请选择角色">
						<el-option v-for="item in roleIdList" :key="item.roleId" :label="item.roleName"
							:value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="失效时间：" prop="failureTime">
					<el-date-picker v-model="dataForm.failureTime" type="datetime" placeholder="失效时间"
						value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitFun" :disabled="isdisabled">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
export default {
	name: 'userAddorUpdata',
	data() {
		var validatePassword = (rule, value, callback) => {
			if (!this.dataForm.userId && !/\S/.test(value)) {
				callback(new Error('密码不能为空'))
			} else {
				callback()
			}
		}
		var validateComfirmPassword = (rule, value, callback) => {
			value = value == undefined ? '' : value;
			if (this.dataForm.password !== value) {
				callback(new Error('确认密码与密码输入不一致'))
			} else {
				callback()
			}
		}
		let testPhone = (rule, value, callback) => {
			let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
			if (value == '') {
				callback(new Error('手机号不能为空'));
			} else if (!reg.test(value)) {
				callback(new Error('手机号格式不正确'));
			} else {
				callback();
			}
		};
		return {
			dialogVisible: false,
			loading: false,
			isdisabled: false,//防止确认二次点击
			dataForm: {
				userId: 0,
				username: '',
				password: '',
				comfirmPassword: '',
				email: '',
				mobile: '',
				roleIdList: [],
				failureTime: null,
				number:'',
			},
			roleIdList: [],
			dataRule: {
				username: [{
					required: true,
					message: '用户名不能为空',
					trigger: 'blur'
				}],
				number: [{
					required: true,
					message: '工号不能为空',
					trigger: 'blur'
				}],
				// password: [{
				// 	validator: validatePassword,
				// 	trigger: 'blur'
				// }],
				comfirmPassword: [{
					validator: validateComfirmPassword,
					trigger: 'blur'
				}],
				mobile: [
					{required: true,message: '手机号不能为空',trigger: 'blur'},
					{ validator: testPhone, trigger: 'blur' }
				],
				roleIdList:[{
					required: true,
					message: '角色不能为空',
					trigger: 'change'
				}]
			}
		}
	},
	methods: {
		init(userId) {
			this.dialogVisible = true;
			this.dataForm.userId = userId;
			this.$nextTick(() => {
				this.$refs.dataForm.resetFields();
				this.isdisabled = false;
			})
			//获取角色列表
			this.Sevice({
				url: 'sys/role/select',
				method: 'get'
			}).then(res => {
				if (res && res.code == 200) {
					this.roleIdList = res.list;
				} else {
					this.roleIdList = [];
				}
			}).catch(err => {
				console.log(err);
			})
			if (!userId) {
				//新增
			} else {
				//修改
				//获取用户信息
				this.Sevice({
					url: 'sys/user/info/' + userId,
					method: 'get'
				}).then(res => {
					if (res && res.code == 200) {
						// this.dataForm = res.user;
						this.dataForm.userId = res.user.userId;
						this.dataForm.username = res.user.username;
						this.dataForm.status = res.user.status;
						this.dataForm.mobile = res.user.mobile;
						this.dataForm.failureTime = res.user.failureTime;
						this.dataForm.email = res.user.email;
						this.dataForm.number=res.user.number;
						// this.dataForm.password = '';
						if (res.user.roleIdList.length) {
							this.dataForm.roleIdList = Number(res.user.roleIdList[0]);
						}
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		//选择角色
		handRole(value) {
			console.log(value)
			this.dataForm.roleIdList = value;
		},
		//关闭弹窗
		handleClose(done) {
			done();
		},
		//提交
		submitFun() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					this.isdisabled = true;
					let urlApi = this.dataForm.userId ? 'sys/user/update' : 'sys/user/save';
					//提交表单
					this.Sevice({
						url: urlApi,
						method: 'post',
						data: {
							email: this.dataForm.email,
							mobile: this.dataForm.mobile,
							password: this.dataForm.password,
							roleIdList: [this.dataForm.roleIdList],
							userId: this.dataForm.userId,
							username: this.dataForm.username,
							status: 1,
							failureTime:this.dataForm.failureTime?this.dataForm.failureTime:null,
							number:this.dataForm.number,
						}
					}).then(res => {
						if (res && res.code == 200) {
							this.dialogVisible = false;
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.$emit('getUserlist')
									this.isdisabled = false;
								}
							})
						} else {
							this.isdisabled = false;
						}
					}).catch(err => {
						console.log(err);
						this.isdisabled = false;
					})
				}
			})
		}
	}
}
</script>

<style>
.cant .el-date-editor.el-input{
  width: 100%;
}
</style>
